* {padding:0;margin:0}
    .map {width:600px;height:600px;background:burlywood;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
    .map .row { display: flex; height: 40px;}
    .map .col { position: relative; width: 40px; height: 40px; line-height: 40px; box-sizing: border-box; border: 1px solid #000; text-align: center;}
    .map .black::before,.map .white::before { position: absolute; left: 4px; top: 4px; content: "";  width: 30px; height: 30px;  background-color: black;  border-radius: 50%;  box-shadow: 0 0 2px rgb(128 128 128 / 50%);}
    .map .white::before {background-color: white;}